<template>
<div>

  <el-row>
    <el-col :span="7">
      <div class="grid-content bg-purple category">
        <el-tree :data="category"
                 :props="defaultProps"
                 node-key="id"
                 :default-expanded-keys="[1,2,3,4,5,6,7]"
                 style="line-height: 0px">
           <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
             <span v-if="data.level == 2">
              <el-button
                  type="text"
                  size="mini"
                  @click="clickSearch(data)"
              >
                查询
              </el-button>
            </span>


          </span>
        </el-tree>

      </div>
    </el-col>
    <el-col :span="17">
      <div class="grid-content bg-purple-light shop-type" ref="type">
<!--        占位-->
        <div style="width: 100%;height: 40px;"></div>
        <div class="chooseType" ref="imgCont">{{shopType}}</div>
       <div class="shop" v-for="item in shopList">
         <img :src="item.image">
       </div>
      </div>
    </el-col>
  </el-row>
  <loading></loading>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import loading from "@/views/common/loading";
export default {
//import引入的组件需要注入到对象中才能使用
components: {loading},
props: {},
data() {
//这里存放数据
return {
  category: [],
  shopList:[],
  shopType: "连衣裙",
  defaultProps: {
    children: 'children',
    label: 'name'
  },
  count: 0

};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  getShopTypeList(){
    this.$http({
      url: "product/shoptype/list",
      method: 'get'
    }).then((res)=>{
      this.getShopTypeWidth()
      this.category = res.data.list
    })
  },
  clickSearch(data){
    // console.log(data)
    this.shopType = data.name
    this.shopList = []
    this.search()
  },
  search(){
    this.$http({
      url: "product/spu/bytype",
      method: "post",
      data:{
        type: this.shopType
      }
    }).then((res)=>{

      this.shopList = res.data.list
      // console.log(this.shopList)
    })
  },
  getShopTypeWidth(){
    var type = this.$refs.type;
    this.$refs.imgCont.style.width = window.getComputedStyle(type).width
  }



},
//声明周期 - 创建完成（可以访问当前this实例）
created() {

  this.getShopTypeList();

  this.search();

},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.custom-tree-node>span{
  margin-left: 20px;
}
.shop-type{

  /*background-color: red;*/
  display: flex;
  max-height: 650px;
  overflow-y: auto;
  flex-flow: wrap;
  background-color: #FFFFFF;
}
.shop{
  margin: 10px;
  width: 100px;
  height: 100px;
  border-radius: 15px;
  /*background-color: #2AF598;*/
}
.shop>img{
  margin: 10px;
  width: 90px;
  height: 90px;
  border-radius: 15px;
}
.category{
  max-height: 650px;
  overflow-y: auto;
  flex-flow: wrap;
  background-color: #FFFFFF;
}
.chooseType{
  /*width: 1000px;*/
  height: 40px;
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 40px;
  font-size: 17px;
  color: #eeeeee;
  overflow: hidden;
  background-color: #3cff5b;
  background-image: linear-gradient(135deg, #3cff5b 0%, #784BA0 50%, #2B86C5 100%);
}
</style>
